<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身房会员管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/bulma/0.9.4/css/bulma.min.css">
    <script src="https://fastly.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f9fa;
            color: #343a40;
            display: flex;
            margin: 0;
        }

        .sidebar {
            width: 200px;
            background-color: #343a40;
            color: white;
            padding: 20px;
            height: 100vh;
            overflow-y: auto;
        }

        .sidebar .tabs {
            flex-direction: column;
            align-items: flex-start;
        }

        .sidebar .tabs li {
            width: 100%;
            margin-bottom: 10px; /* 添加底部间距 */
        }

        .sidebar .tabs li a {
            color: white;
            padding: 10px;
            display: block;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .sidebar .tabs li.is-active a {
            background-color: #007bff;
        }

        .sidebar .tabs li a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        h1 {
            font-family: 'SimHei', sans-serif;
            text-align: center;
            margin-bottom: 20px;
            color: #343a40;
        }

        .tab-content {
            display: none;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            min-height: calc(100vh - 40px);
        }

        .tab-content.active {
            display: block;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f0f0f0;
        }

        .button {
            margin-right: 5px;
            transition: background-color 0.3s ease;
        }

        .button.is-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .button.is-primary:hover {
            background-color: #0069d9;
            border-color: #0062cc;
        }

        .button.is-warning {
            background-color: #ffc107;
            border-color: #ffc107;
        }

        .button.is-warning:hover {
            background-color: #e0a800;
            border-color: #d39e00;
        }

        .button.is-danger {
            background-color: #dc3545;
            border-color: #dc3545;
        }

        .button.is-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
        }

        .modal {
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div class="sidebar">
        <div class="tabs">
            <ul>
                <li class="is-active" data-tab="home"><a>首页</a></li>
                <li data-tab="member"><a>会员管理</a></li>
                <li data-tab="course"><a>课程管理</a></li>
                <li data-tab="equipment"><a>器材管理</a></li>
                <li data-tab="attendance"><a>考勤管理</a></li>
                <li data-tab="payment"><a>缴费管理</a></li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <h1>健身房会员管理系统</h1>
        <div id="home" class="tab-content active">
            <h2>首页</h2>
            <canvas id="myPieChart" width="400" height="200"></canvas>
        </div>
        <div id="member" class="tab-content">
            <h2>会员管理</h2>
            <input type="text" id="memberSearch" placeholder="搜索会员姓名" oninput="searchMembers()">
            <button class="button is-primary" onclick="openAddMemberModal()">添加会员</button>
            <table id="memberTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>联系方式</th>
                        <th>会员类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="course" class="tab-content">
            <h2>课程管理</h2>
            <input type="text" id="courseSearch" placeholder="搜索课程名称" oninput="searchCourses()">
            <button class="button is-primary" onclick="openAddCourseModal()">添加课程</button>
            <table id="courseTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>课程名称</th>
                        <th>授课教练</th>
                        <th>上课时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="equipment" class="tab-content">
            <h2>器材管理</h2>
            <input type="text" id="equipmentSearch" placeholder="搜索器材名称" oninput="searchEquipments()">
            <button class="button is-primary" onclick="openAddEquipmentModal()">添加器材</button>
            <table id="equipmentTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>器材名称</th>
                        <th>购买时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="attendance" class="tab-content">
            <h2>考勤管理</h2>
            <input type="text" id="attendanceSearch" placeholder="搜索会员姓名" oninput="searchAttendances()">
            <button class="button is-primary" onclick="openAddAttendanceModal()">添加考勤记录</button>
            <table id="attendanceTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>会员姓名</th>
                        <th>考勤日期</th>
                        <th>考勤状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="payment" class="tab-content">
            <h2>缴费管理</h2>
            <input type="text" id="paymentSearch" placeholder="搜索会员姓名" oninput="searchPayments()">
            <button class="button is-primary" onclick="openAddPaymentModal()">添加缴费记录</button>
            <table id="paymentTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>会员姓名</th>
                        <th>缴费金额</th>
                        <th>缴费日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 会员添加/编辑模态框 -->
    <div id="memberModal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">添加/编辑会员</p>
                <button class="delete" aria-label="close" onclick="closeMemberModal()"></button>
            </header>
            <section class="modal-card-body">
                <input type="hidden" id="memberId">
                <label for="memberName">姓名</label>
                <input type="text" id="memberName" class="input">
                <label for="memberContact">联系方式</label>
                <input type="text" id="memberContact" class="input">
                <label for="memberType">会员类型</label>
                <input type="text" id="memberType" class="input">
            </section>
            <footer class="modal-card-foot">
                <button class="button" onclick="closeMemberModal()">关闭</button>
                <button class="button is-primary" onclick="saveMember()">保存</button>
            </footer>
        </div>
    </div>

    <!-- 课程添加/编辑模态框 -->
    <div id="courseModal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">添加/编辑课程</p>
                <button class="delete" aria-label="close" onclick="closeCourseModal()"></button>
            </header>
            <section class="modal-card-body">
                <input type="hidden" id="courseId">
                <label for="courseName">课程名称</label>
                <input type="text" id="courseName" class="input">
                <label for="courseCoach">授课教练</label>
                <input type="text" id="courseCoach" class="input">
                <label for="courseTime">上课时间</label>
                <input type="text" id="courseTime" class="input">
            </section>
            <footer class="modal-card-foot">
                <button class="button" onclick="closeCourseModal()">关闭</button>
                <button class="button is-primary" onclick="saveCourse()">保存</button>
            </footer>
        </div>
    </div>

    <!-- 器材添加/编辑模态框 -->
    <div id="equipmentModal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">添加/编辑器材</p>
                <button class="delete" aria-label="close" onclick="closeEquipmentModal()"></button>
            </header>
            <section class="modal-card-body">
                <input type="hidden" id="equipmentId">
                <label for="equipmentName">器材名称</label>
                <input type="text" id="equipmentName" class="input">
                <label for="equipmentPurchaseDate">购买时间</label>
                <input type="text" id="equipmentPurchaseDate" class="input">
                <label for="equipmentStatus">状态</label>
                <input type="text" id="equipmentStatus" class="input">
            </section>
            <footer class="modal-card-foot">
                <button class="button" onclick="closeEquipmentModal()">关闭</button>
                <button class="button is-primary" onclick="saveEquipment()">保存</button>
            </footer>
        </div>
    </div>

    <!-- 考勤添加/编辑模态框 -->
    <div id="attendanceModal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">添加/编辑考勤记录</p>
                <button class="delete" aria-label="close" onclick="closeAttendanceModal()"></button>
            </header>
            <section class="modal-card-body">
                <input type="hidden" id="attendanceId">
                <label for="attendanceMemberName">会员姓名</label>
                <input type="text" id="attendanceMemberName" class="input">
                <label for="attendanceDate">考勤日期</label>
                <input type="text" id="attendanceDate" class="input">
                <label for="attendanceStatus">考勤状态</label>
                <input type="text" id="attendanceStatus" class="input">
            </section>
            <footer class="modal-card-foot">
                <button class="button" onclick="closeAttendanceModal()">关闭</button>
                <button class="button is-primary" onclick="saveAttendance()">保存</button>
            </footer>
        </div>
    </div>

    <!-- 缴费添加/编辑模态框 -->
    <div id="paymentModal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">添加/编辑缴费记录</p>
                <button class="delete" aria-label="close" onclick="closePaymentModal()"></button>
            </header>
            <section class="modal-card-body">
                <input type="hidden" id="paymentId">
                <label for="paymentMemberName">会员姓名</label>
                <input type="text" id="paymentMemberName" class="input">
                <label for="paymentAmount">缴费金额</label>
                <input type="text" id="paymentAmount" class="input">
                <label for="paymentDate">缴费日期</label>
                <input type="text" id="paymentDate" class="input">
            </section>
            <footer class="modal-card-foot">
                <button class="button" onclick="closePaymentModal()">关闭</button>
                <button class="button is-primary" onclick="savePayment()">保存</button>
            </footer>
        </div>
    </div>

    <script>
        // 初始化表格和图表
        function init() {
            initMembers();
            initCourses();
            initEquipments();
            initAttendances();
            initPayments();
            initChart();
            setupTabs();
        }

        // 切换标签页
        function setupTabs() {
            const tabs = document.querySelectorAll('.tabs li');
            const tabContents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => t.classList.remove('is-active'));
                    tabContents.forEach(c => c.classList.remove('active'));

                    tab.classList.add('is-active');
                    const target = tab.dataset.tab;
                    document.getElementById(target).classList.add('active');
                });
            });
        }

        // 会员管理
        function initMembers() {
            let members = JSON.parse(localStorage.getItem('members')) || [
                { id: 1, name: '会员1', contact: '13800138001', type: '普通会员' },
                { id: 2, name: '会员2', contact: '13800138002', type: '高级会员' },
                { id: 3, name: '会员3', contact: '13800138003', type: '普通会员' },
                { id: 4, name: '会员4', contact: '13800138004', type: '高级会员' },
                { id: 5, name: '会员5', contact: '13800138005', type: '普通会员' },
                { id: 6, name: '会员6', contact: '13800138006', type: '高级会员' },
                { id: 7, name: '会员7', contact: '13800138007', type: '普通会员' },
                { id: 8, name: '会员8', contact: '13800138008', type: '高级会员' },
                { id: 9, name: '会员9', contact: '13800138009', type: '普通会员' },
                { id: 10, name: '会员10', contact: '13800138010', type: '高级会员' }
            ];
            localStorage.setItem('members', JSON.stringify(members));
            renderMembers(members);
        }

        function renderMembers(members) {
            let memberTable = document.getElementById('memberTable').getElementsByTagName('tbody')[0];
            memberTable.innerHTML = '';
            members.forEach(member => {
                let row = memberTable.insertRow();
                row.insertCell(0).textContent = member.id;
                row.insertCell(1).textContent = member.name;
                row.insertCell(2).textContent = member.contact;
                row.insertCell(3).textContent = member.type;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditMemberModal(${member.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteMember(${member.id})">删除</button>`;
            });
        }

        function openAddMemberModal() {
            document.getElementById('memberId').value = '';
            document.getElementById('memberName').value = '';
            document.getElementById('memberContact').value = '';
            document.getElementById('memberType').value = '';
            document.getElementById('memberModal').classList.add('is-active');
        }

        function closeMemberModal() {
            document.getElementById('memberModal').classList.remove('is-active');
        }

        function openEditMemberModal(id) {
            let members = JSON.parse(localStorage.getItem('members'));
            let member = members.find(m => m.id === id);
            document.getElementById('memberId').value = member.id;
            document.getElementById('memberName').value = member.name;
            document.getElementById('memberContact').value = member.contact;
            document.getElementById('memberType').value = member.type;
            document.getElementById('memberModal').classList.add('is-active');
        }

        function saveMember() {
            let members = JSON.parse(localStorage.getItem('members'));
            let id = document.getElementById('memberId').value;
            let name = document.getElementById('memberName').value;
            let contact = document.getElementById('memberContact').value;
            let type = document.getElementById('memberType').value;
            if (id) {
                let index = members.findIndex(m => m.id === parseInt(id));
                members[index] = { id: parseInt(id), name, contact, type };
            } else {
                let newId = members.length > 0 ? Math.max(...members.map(m => m.id)) + 1 : 1;
                members.push({ id: newId, name, contact, type });
            }
            localStorage.setItem('members', JSON.stringify(members));
            renderMembers(members);
            closeMemberModal();
        }

        function deleteMember(id) {
            let members = JSON.parse(localStorage.getItem('members'));
            members = members.filter(m => m.id!== id);
            localStorage.setItem('members', JSON.stringify(members));
            renderMembers(members);
        }

        function searchMembers() {
            let searchTerm = document.getElementById('memberSearch').value.toLowerCase();
            let members = JSON.parse(localStorage.getItem('members'));
            let filteredMembers = members.filter(member => member.name.toLowerCase().includes(searchTerm));
            renderMembers(filteredMembers);
        }

        // 课程管理
        function initCourses() {
            let courses = JSON.parse(localStorage.getItem('courses')) || [
                { id: 1, name: '瑜伽课程', coach: '教练1', time: '周一 10:00-11:30' },
                { id: 2, name: '健身操课程', coach: '教练2', time: '周二 14:00-15:30' },
                { id: 3, name: '拳击课程', coach: '教练3', time: '周三 19:00-20:30' },
                { id: 4, name: '动感单车课程', coach: '教练4', time: '周四 16:00-17:30' },
                { id: 5, name: '普拉提课程', coach: '教练5', time: '周五 11:00-12:30' },
                { id: 6, name: '游泳课程', coach: '教练6', time: '周六 09:00-10:30' },
                { id: 7, name: '舞蹈课程', coach: '教练7', time: '周日 15:00-16:30' },
                { id: 8, name: '力量训练课程', coach: '教练8', time: '周二 18:00-19:30' },
                { id: 9, name: '有氧训练课程', coach: '教练9', time: '周四 20:00-21:30' },
                { id: 10, name: '拉伸课程', coach: '教练10', time: '周六 13:00-14:30' }
            ];
            localStorage.setItem('courses', JSON.stringify(courses));
            renderCourses(courses);
        }

        function renderCourses(courses) {
            let courseTable = document.getElementById('courseTable').getElementsByTagName('tbody')[0];
            courseTable.innerHTML = '';
            courses.forEach(course => {
                let row = courseTable.insertRow();
                row.insertCell(0).textContent = course.id;
                row.insertCell(1).textContent = course.name;
                row.insertCell(2).textContent = course.coach;
                row.insertCell(3).textContent = course.time;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditCourseModal(${course.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteCourse(${course.id})">删除</button>`;
            });
        }

        function openAddCourseModal() {
            document.getElementById('courseId').value = '';
            document.getElementById('courseName').value = '';
            document.getElementById('courseCoach').value = '';
            document.getElementById('courseTime').value = '';
            document.getElementById('courseModal').classList.add('is-active');
        }

        function closeCourseModal() {
            document.getElementById('courseModal').classList.remove('is-active');
        }

        function openEditCourseModal(id) {
            let courses = JSON.parse(localStorage.getItem('courses'));
            let course = courses.find(c => c.id === id);
            document.getElementById('courseId').value = course.id;
            document.getElementById('courseName').value = course.name;
            document.getElementById('courseCoach').value = course.coach;
            document.getElementById('courseTime').value = course.time;
            document.getElementById('courseModal').classList.add('is-active');
        }

        function saveCourse() {
            let courses = JSON.parse(localStorage.getItem('courses'));
            let id = document.getElementById('courseId').value;
            let name = document.getElementById('courseName').value;
            let coach = document.getElementById('courseCoach').value;
            let time = document.getElementById('courseTime').value;
            if (id) {
                let index = courses.findIndex(c => c.id === parseInt(id));
                courses[index] = { id: parseInt(id), name, coach, time };
            } else {
                let newId = courses.length > 0 ? Math.max(...courses.map(c => c.id)) + 1 : 1;
                courses.push({ id: newId, name, coach, time });
            }
            localStorage.setItem('courses', JSON.stringify(courses));
            renderCourses(courses);
            closeCourseModal();
        }

        function deleteCourse(id) {
            let courses = JSON.parse(localStorage.getItem('courses'));
            courses = courses.filter(c => c.id!== id);
            localStorage.setItem('courses', JSON.stringify(courses));
            renderCourses(courses);
        }

        function searchCourses() {
            let searchTerm = document.getElementById('courseSearch').value.toLowerCase();
            let courses = JSON.parse(localStorage.getItem('courses'));
            let filteredCourses = courses.filter(course => course.name.toLowerCase().includes(searchTerm));
            renderCourses(filteredCourses);
        }

        // 器材管理
        function initEquipments() {
            let equipments = JSON.parse(localStorage.getItem('equipments')) || [
                { id: 1, name: '跑步机', purchaseDate: '2024-01-01', status: '正常' },
                { id: 2, name: '哑铃', purchaseDate: '2024-01-02', status: '正常' },
                { id: 3, name: '杠铃', purchaseDate: '2024-01-03', status: '正常' },
                { id: 4, name: '健身球', purchaseDate: '2024-01-04', status: '正常' },
                { id: 5, name: '动感单车', purchaseDate: '2024-01-05', status: '正常' },
                { id: 6, name: '仰卧起坐板', purchaseDate: '2024-01-06', status: '正常' },
                { id: 7, name: '瑜伽垫', purchaseDate: '2024-01-07', status: '正常' },
                { id: 8, name: '拉力器', purchaseDate: '2024-01-08', status: '正常' },
                { id: 9, name: '弹力带', purchaseDate: '2024-01-09', status: '正常' },
                { id: 10, name: '划船机', purchaseDate: '2024-01-10', status: '正常' }
            ];
            localStorage.setItem('equipments', JSON.stringify(equipments));
            renderEquipments(equipments);
        }

        function renderEquipments(equipments) {
            let equipmentTable = document.getElementById('equipmentTable').getElementsByTagName('tbody')[0];
            equipmentTable.innerHTML = '';
            equipments.forEach(equipment => {
                let row = equipmentTable.insertRow();
                row.insertCell(0).textContent = equipment.id;
                row.insertCell(1).textContent = equipment.name;
                row.insertCell(2).textContent = equipment.purchaseDate;
                row.insertCell(3).textContent = equipment.status;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditEquipmentModal(${equipment.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteEquipment(${equipment.id})">删除</button>`;
            });
        }

        function openAddEquipmentModal() {
            document.getElementById('equipmentId').value = '';
            document.getElementById('equipmentName').value = '';
            document.getElementById('equipmentPurchaseDate').value = '';
            document.getElementById('equipmentStatus').value = '';
            document.getElementById('equipmentModal').classList.add('is-active');
        }

        function closeEquipmentModal() {
            document.getElementById('equipmentModal').classList.remove('is-active');
        }

        function openEditEquipmentModal(id) {
            let equipments = JSON.parse(localStorage.getItem('equipments'));
            let equipment = equipments.find(e => e.id === id);
            document.getElementById('equipmentId').value = equipment.id;
            document.getElementById('equipmentName').value = equipment.name;
            document.getElementById('equipmentPurchaseDate').value = equipment.purchaseDate;
            document.getElementById('equipmentStatus').value = equipment.status;
            document.getElementById('equipmentModal').classList.add('is-active');
        }

        function saveEquipment() {
            let equipments = JSON.parse(localStorage.getItem('equipments'));
            let id = document.getElementById('equipmentId').value;
            let name = document.getElementById('equipmentName').value;
            let purchaseDate = document.getElementById('equipmentPurchaseDate').value;
            let status = document.getElementById('equipmentStatus').value;
            if (id) {
                let index = equipments.findIndex(e => e.id === parseInt(id));
                equipments[index] = { id: parseInt(id), name, purchaseDate, status };
            } else {
                let newId = equipments.length > 0 ? Math.max(...equipments.map(e => e.id)) + 1 : 1;
                equipments.push({ id: newId, name, purchaseDate, status });
            }
            localStorage.setItem('equipments', JSON.stringify(equipments));
            renderEquipments(equipments);
            closeEquipmentModal();
        }

        function deleteEquipment(id) {
            let equipments = JSON.parse(localStorage.getItem('equipments'));
            equipments = equipments.filter(e => e.id!== id);
            localStorage.setItem('equipments', JSON.stringify(equipments));
            renderEquipments(equipments);
        }

        function searchEquipments() {
            let searchTerm = document.getElementById('equipmentSearch').value.toLowerCase();
            let equipments = JSON.parse(localStorage.getItem('equipments'));
            let filteredEquipments = equipments.filter(equipment => equipment.name.toLowerCase().includes(searchTerm));
            renderEquipments(filteredEquipments);
        }

        // 考勤管理
        function initAttendances() {
            let attendances = JSON.parse(localStorage.getItem('attendances')) || [
                { id: 1, memberName: '会员1', date: '2024-01-01', status: '出勤' },
                { id: 2, memberName: '会员2', date: '2024-01-02', status: '出勤' },
                { id: 3, memberName: '会员3', date: '2024-01-03', status: '出勤' },
                { id: 4, memberName: '会员4', date: '2024-01-04', status: '出勤' },
                { id: 5, memberName: '会员5', date: '2024-01-05', status: '出勤' },
                { id: 6, memberName: '会员6', date: '2024-01-06', status: '出勤' },
                { id: 7, memberName: '会员7', date: '2024-01-07', status: '出勤' },
                { id: 8, memberName: '会员8', date: '2024-01-08', status: '出勤' },
                { id: 9, memberName: '会员9', date: '2024-01-09', status: '出勤' },
                { id: 10, memberName: '会员10', date: '2024-01-10', status: '出勤' }
            ];
            localStorage.setItem('attendances', JSON.stringify(attendances));
            renderAttendances(attendances);
        }

        function renderAttendances(attendances) {
            let attendanceTable = document.getElementById('attendanceTable').getElementsByTagName('tbody')[0];
            attendanceTable.innerHTML = '';
            attendances.forEach(attendance => {
                let row = attendanceTable.insertRow();
                row.insertCell(0).textContent = attendance.id;
                row.insertCell(1).textContent = attendance.memberName;
                row.insertCell(2).textContent = attendance.date;
                row.insertCell(3).textContent = attendance.status;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditAttendanceModal(${attendance.id})">编辑</button>
                                         <button class="button is-danger" onclick="deleteAttendance(${attendance.id})">删除</button>`;
            });
        }

        function openAddAttendanceModal() {
            document.getElementById('attendanceId').value = '';
            document.getElementById('attendanceMemberName').value = '';
            document.getElementById('attendanceDate').value = '';
            document.getElementById('attendanceStatus').value = '';
            document.getElementById('attendanceModal').classList.add('is-active');
        }

        function closeAttendanceModal() {
            document.getElementById('attendanceModal').classList.remove('is-active');
        }

        function openEditAttendanceModal(id) {
            let attendances = JSON.parse(localStorage.getItem('attendances'));
            let attendance = attendances.find(a => a.id === id);
            document.getElementById('attendanceId').value = attendance.id;
            document.getElementById('attendanceMemberName').value = attendance.memberName;
            document.getElementById('attendanceDate').value = attendance.date;
            document.getElementById('attendanceStatus').value = attendance.status;
            document.getElementById('attendanceModal').classList.add('is-active');
        }

        function saveAttendance() {
            let attendances = JSON.parse(localStorage.getItem('attendances'));
            let id = document.getElementById('attendanceId').value;
            let memberName = document.getElementById('attendanceMemberName').value;
            let date = document.getElementById('attendanceDate').value;
            let status = document.getElementById('attendanceStatus').value;
            if (id) {
                let index = attendances.findIndex(a => a.id === parseInt(id));
                attendances[index] = { id: parseInt(id), memberName, date, status };
            } else {
                let newId = attendances.length > 0 ? Math.max(...attendances.map(a => a.id)) + 1 : 1;
                attendances.push({ id: newId, memberName, date, status });
            }
            localStorage.setItem('attendances', JSON.stringify(attendances));
            renderAttendances(attendances);
            closeAttendanceModal();
        }

        function deleteAttendance(id) {
            let attendances = JSON.parse(localStorage.getItem('attendances'));
            attendances = attendances.filter(a => a.id!== id);
            localStorage.setItem('attendances', JSON.stringify(attendances));
            renderAttendances(attendances);
        }

        function searchAttendances() {
            let searchTerm = document.getElementById('attendanceSearch').value.toLowerCase();
            let attendances = JSON.parse(localStorage.getItem('attendances'));
            let filteredAttendances = attendances.filter(attendance => attendance.memberName.toLowerCase().includes(searchTerm));
            renderAttendances(filteredAttendances);
        }

        // 缴费管理
        function initPayments() {
            let payments = JSON.parse(localStorage.getItem('payments')) || [
                { id: 1, memberName: '会员1', amount: 500, date: '2024-01-01' },
                { id: 2, memberName: '会员2', amount: 600, date: '2024-01-02' },
                { id: 3, memberName: '会员3', amount: 500, date: '2024-01-03' },
                { id: 4, memberName: '会员4', amount: 600, date: '2024-01-04' },
                { id: 5, memberName: '会员5', amount: 500, date: '2024-01-05' },
                { id: 6, memberName: '会员6', amount: 600, date: '2024-01-06' },
                { id: 7, memberName: '会员7', amount: 500, date: '2024-01-07' },
                { id: 8, memberName: '会员8', amount: 600, date: '2024-01-08' },
                { id: 9, memberName: '会员9', amount: 500, date: '2024-01-09' },
                { id: 10, memberName: '会员10', amount: 600, date: '2024-01-10' }
            ];
            localStorage.setItem('payments', JSON.stringify(payments));
            renderPayments(payments);
        }

        function renderPayments(payments) {
            let paymentTable = document.getElementById('paymentTable').getElementsByTagName('tbody')[0];
            paymentTable.innerHTML = '';
            payments.forEach(payment => {
                let row = paymentTable.insertRow();
                row.insertCell(0).textContent = payment.id;
                row.insertCell(1).textContent = payment.memberName;
                row.insertCell(2).textContent = payment.amount;
                row.insertCell(3).textContent = payment.date;
                let actionsCell = row.insertCell(4);
                actionsCell.innerHTML = `<button class="button is-warning" onclick="openEditPaymentModal(${payment.id})">编辑</button>
                                         <button class="button is-danger" onclick="deletePayment(${payment.id})">删除</button>`;
            });
        }

        function openAddPaymentModal() {
            document.getElementById('paymentId').value = '';
            document.getElementById('paymentMemberName').value = '';
            document.getElementById('paymentAmount').value = '';
            document.getElementById('paymentDate').value = '';
            document.getElementById('paymentModal').classList.add('is-active');
        }

        function closePaymentModal() {
            document.getElementById('paymentModal').classList.remove('is-active');
        }

        function openEditPaymentModal(id) {
            let payments = JSON.parse(localStorage.getItem('payments'));
            let payment = payments.find(p => p.id === id);
            document.getElementById('paymentId').value = payment.id;
            document.getElementById('paymentMemberName').value = payment.memberName;
            document.getElementById('paymentAmount').value = payment.amount;
            document.getElementById('paymentDate').value = payment.date;
            document.getElementById('paymentModal').classList.add('is-active');
        }

        function savePayment() {
            let payments = JSON.parse(localStorage.getItem('payments'));
            let id = document.getElementById('paymentId').value;
            let memberName = document.getElementById('paymentMemberName').value;
            let amount = document.getElementById('paymentAmount').value;
            let date = document.getElementById('paymentDate').value;
            if (id) {
                let index = payments.findIndex(p => p.id === parseInt(id));
                payments[index] = { id: parseInt(id), memberName, amount, date };
            } else {
                let newId = payments.length > 0 ? Math.max(...payments.map(p => p.id)) + 1 : 1;
                payments.push({ id: newId, memberName, amount, date });
            }
            localStorage.setItem('payments', JSON.stringify(payments));
            renderPayments(payments);
            closePaymentModal();
        }

        function deletePayment(id) {
            let payments = JSON.parse(localStorage.getItem('payments'));
            payments = payments.filter(p => p.id!== id);
            localStorage.setItem('payments', JSON.stringify(payments));
            renderPayments(payments);
        }

        function searchPayments() {
            let searchTerm = document.getElementById('paymentSearch').value.toLowerCase();
            let payments = JSON.parse(localStorage.getItem('payments'));
            let filteredPayments = payments.filter(payment => payment.memberName.toLowerCase().includes(searchTerm));
            renderPayments(filteredPayments);
        }

        // 初始化图表
        function initChart() {
            // 初始化饼图
            let ctxPie = document.getElementById('myPieChart').getContext('2d');
            let members = JSON.parse(localStorage.getItem('members')).length;
            let courses = JSON.parse(localStorage.getItem('courses')).length;
            let equipments = JSON.parse(localStorage.getItem('equipments')).length;
            let attendances = JSON.parse(localStorage.getItem('attendances')).length;
            let payments = JSON.parse(localStorage.getItem('payments')).length;
            new Chart(ctxPie, {
                type: 'pie',
                data: {
                    labels: ['会员数量', '课程数量', '器材数量', '考勤记录数量', '缴费记录数量'],
                    datasets: [{
                        label: '数据统计',
                        data: [members, courses, equipments, attendances, payments],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 205, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 205, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {}
            });
        }

        // 页面加载完成后初始化
        window.onload = function () {
            init();
        };
    </script>
</body>

</html>